<template>
  <div>
    <h2>Query 传递参数</h2>
    <ul>
      <li v-for="item in list" :key="item.filmId">
        <RouterLink :to="`/detail?id=${item.filmId}`">
          {{ item.name }}
        </RouterLink>
      </li>
    </ul>

    <h2>Params 传递参数</h2>
    <ul>
      <li v-for="item in list" :key="item.filmId">
        <RouterLink :to="`/detail/${item.filmId}`">
          {{ item.name }}
        </RouterLink>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
import { RouterLink } from "vue-router";
export default {
  name: "list",
  data() {
    return {
      // 用于存放电影列表数据
      list: [],
    };
  },
  methods: {
    async fetchData() {
      const response = await axios.get(
        "https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=439799",
        {
          headers: {
            "X-Host": "mall.film-ticket.film.list",
          },
        }
      );
      // 结构出 data - 接口返回数据
      const {
        data: { status, message, data },
      } = response;
      // 判断业务状态码 status
      if (status !== 0) {
        alert(message);
        return;
      }
      // 将 data.films 赋值给 this.list
      this.list = data.films;
    },
  },
  mounted() {
    this.fetchData();
  },
  components: { RouterLink },
};
</script>
